<template>
  <div>
    <!-- 顶部积分 -->
    <div class="integral_top">
      <p class="num">{{integral}}</p>
      <p class="order">剩余积分</p>
    </div>

    <!-- 积分详情 -->
    <div class="order_details">
      <div class="order_p">积分明细</div>

      <ul v-if="list.length>0">
        <li class="flex flex-direction" v-for="(item,index) in list" :key="index">
          <p class="flex flex-pack-justify" style="height:60rpx;">
            <span class="order_product ellipsis flex-1" style="padding-right:15px">{{item.causes}}</span>
            <span class="order_integral" v-if="item.incOrDec">+ {{item.integral}}积分</span>
            <span
              class="order_integral"
              style="color:rgba(161,189,201,1);"
              v-else
            >- {{item.integral}}积分</span>
          </p>
          <p class="order_name flex flex-pack-justify">
            <span>{{item.gmtProduct}}</span>
            <span>{{item.gmtCreate}}</span>
          </p>
        </li>
        <div>
          <div class="activeMore" v-if="!loadMore && list.length>0">—— 已经到底啦 ——</div>
        </div>
      </ul>
      <div class="empty" v-else>
        <div style="text-align:center">
          <img
            class="emptyIcon"
            style="margin: 30px 0"
            src="/static/images/user/collect_icon.png"
            alt
          />
          <p style="font-size:14px;color:#909292">暂无数据</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import notDatas from '@/components/notDatas';
import { userIntegralLog } from '@/api/api';
export default {
  props: {},
  data () {
    return {
      integral: 100,
      list: [],
      formData: {
        pageIndex: 1,
        pageSize: 10
      },
      loadMore: true,
      isLastPage: false
    };
  },
  components: { notDatas },
  computed: {},
  created () {},
  onLoad () {},
  mounted () {
    Object.assign(this.$data, this.$options.data());
    this.loadMore = true;
    this.integral = this.$mp.query.integral;
    this.userIntegralLog();
  },
  // 上拉加载更多
  onReachBottom () {
    this.userIntegralLog();
  },
  watch: {},
  methods: {
    /** 产品分页 */
    async userIntegralLog () {
      if (this.loadMore) {
        wx.showLoading({
          title: '加载中',
          duration: 1000
        });
        await userIntegralLog(this.formData).then(res => {
          wx.hideLoading();
          if (!res.code) {
            var data = res.list;
            this.list = this.list.concat(data);
            ++this.formData.pageIndex;
            if (res.pages < this.formData.pageIndex) {
              this.loadMore = false;
            }
          }
        });
      }
    }
  }
};
</script>

<style scoped lang="less">
// 顶部积分
.integral_top {
  background: url("https://qinghe-zichan.oss-cn-shanghai.aliyuncs.com/imgs/myIntegral.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 182px;
  width: 100%;
  padding-top: 38px;
  padding-left: 30px;
  box-sizing: border-box;
  .emptyIcon {
    width: 229px;
    height: 175px;
    // margin: 35% 0 40px;
  }
  .num {
    font-size: 40px;
    font-weight: 700;
    color: rgba(255, 255, 255, 1);
  }

  .order {
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
  }
}

// 积分详情
.order_details {
  padding: 0 15px;
  box-sizing: border-box;

  .order_p {
    height: 32px;
    font-size: 12px;
    font-weight: 400;
    color: rgba(144, 146, 146, 1);
    border-bottom: 1px solid #e6e6e6;
    box-sizing: border-box;
  }
}

li {
  border-bottom: 1px solid #e6e6e6;
  padding: 16px 0px;

  .order_product {
    font-size: 15px;
    font-weight: 700;
    color: rgba(2, 6, 4, 1);
  }

  .order_integral {
    font-size: 14px;
    font-weight: 500;
    color: rgba(24, 119, 152, 1);
  }

  .order_name {
    font-size: 13px;
    font-weight: 400;
    color: rgba(144, 146, 146, 1);
  }
}

// 底部
.store_footer {
  height: 63px;
  line-height: 63px;
  text-align: center;
  font-size: 13px;
  font-weight: 400;
  color: #b8bab9;
}
</style>
